<template>
  <div class="wrap">
    <div class="banner">
      <el-carousel
        trigger="click"
        :height="bannerHeight + 'px'"
        @change="hangdleBannerChange"
        :autoplay="false"
      >
        <el-carousel-item v-for="(item, index) in bannersVideo" :key="index">
          <video
            ref="video"
            width="100%"
            :src="item"
            autoplay="autoplay"
            loop="loop"
            @canplay="handCanPlay"
          ></video>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="news">
      <div class="photo">
        <el-carousel trigger="click" height="518px">
          <el-carousel-item v-for="item in newsList" :key="item.id">
            <img width="100%" height="100%" :src="item.imageUrl" @click="newsDetailTo(item.id)" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="size-box__row"></div>
      <div class="news-list">
        <div class="list-item" v-for="item in newsList" :key="item.id" @click="newsDetailTo(item.id)">
          <h2 class="list-title">{{item.title}}</h2>
          <p class="list-tcontent">
            {{item.description}}
          </p>
        </div>
      </div>
    </div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="solution">
      <h2 class="solution-title">服务千行百业的全栈解决方案</h2>
      <div class="size-box__column"></div>
      <div class="size-box__column"></div>
      <h4 class="solution-title-sec">
        由专业行业解决方案经理定制，面向各行业工业互联网业务的解决方案
      </h4>
      <div class="size-box__column"></div>
      <div class="size-box__column"></div>
      <div class="solution-box">
        <ul class="solution-row" v-for="(row, index) in solutions" :key="index">
          <li
            class="solution-item"
            v-for="(item, i) in row"
            :key="i"
            :style="{ backgroundImage: `url(${item.background})` }"
          >
            <div class="solution-item__mask"></div>
            <div class="solution-item__text">
              <i
                class="solution-item__text--icon"
                :style="{ backgroundImage: `url(${item.icon})` }"
              ></i>
              <p class="solution-item__text--title">{{ item.title }}</p>
              <p class="solution-item__text--desc">{{ item.desc }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="size-box__column"></div>
    <div class="size-box__column"></div>
    <div class="partner">
      <h1 class="partner-title">行业合作伙伴</h1>
      <div class="size-box__column"></div>
      <div class="size-box__column"></div>
      <div class="size-box__column"></div>
      <div class="box-wrap">
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/logo1.jpg"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/haikang.png"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/kerui.jpg"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/yidong.png"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/frend1.png"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/sgjt.jpg"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/gtyhl.png"
          />
          <div class="box-footer"></div>
        </div>
        <div class="box">
          <img
            class="partner-img"
            width="100%"
            height="100%"
            src="@/assets/gtny.jpg"
          />
          <div class="box-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsList } from '@/api/news'

export default {
  data() {
    return {
      bannerHeight: 0,
      bannerIndex: 0,
      bannersVideo: [
        require("@/assets/player1.mp4"),
        // require('@/assets/player1.mp4')
      ],
      bannersImg: [
        require("@/assets/news1.png"),
        require("@/assets/news2.png"),
      ],
      newsList: [],
      solutions: [
        [
          {
            title: "政府及公共事业",
            background: require("@/assets/government.jpg"),
            icon: require("@/assets/government.png"),
            desc:
              "利用大数据、人工智能和区块链等新技术，实现政务+互联网转型升级",
          },
          {
            title: "智慧园区",
            background: require("@/assets/zhyq.jpg"),
            icon: require("@/assets/screen.png"),
            desc:
              "信息技术和各类资源的整合，充分降低企业运营成本，提高工作效率，加强各类园区创新、服务和管理能力。",
          },
          {
            title: "工业制造",
            background: require("@/assets/industry1.jpg"),
            icon: require("@/assets/industry.png"),
            desc:
              "优化生产资源配置，提高制造资源的利用率，为企业提升经营管理能力，助力传统工业实现信息化、数字化、智能化转型。",
          },
          {
            title: "能源",
            background: require("@/assets/energy.jpg"),
            icon: require("@/assets/energy.png"),
            desc:
              "将AI及云计算技术广泛应用于生产、运输、配送和消费等环节，助力能源企业降本增效",
          },
        ],
        [
          {
            title: "医疗健康",
            background: require("@/assets/healthcare.jpg"),
            icon: require("@/assets/healthcare.png"),
            desc:
              "提供完善的医疗应用和服务体系，助力客户数字化转型，提升患者就医体验和诊疗质量",
          },
          {
            title: "教育",
            background: require("@/assets/education.jpg"),
            icon: require("@/assets/education.png"),
            desc:
              "提供场景化解决方案，加快实现教育行业智能化转型，实现高质量、普惠教育",
          },
          {
            title: "智慧城市",
            background: require("@/assets/smartcity.jpg"),
            icon: require("@/assets/smartcity.png"),
            desc:
              "推动新一代信息技术与城市现代化发展深度融合，打造新型智慧城市",
          },
          {
            title: "物流交通",
            background: require("@/assets/logistics.jpg"),
            icon: require("@/assets/car.png"),
            desc:
              "依托铝工业云-边-端优势，拥抱数字化转型，迈向人悦其行，物优其流的综合交通",
          },
        ],
      ],
    };
  },
  methods: {
    hangdleBannerChange(index) {
      this.bannerIndex = index;
      this.resize();
    },
    handCanPlay() {
      this.resize();
    },
    resize() {
      this.$nextTick(() => {
        if (this.$refs.video) {
          this.bannerHeight = this.$refs.video[this.bannerIndex].offsetHeight;
        }
      });
    },
    initNews () {
      getNewsList(1, 1, 3).then((res) => {
        if (res.success) {
          this.newsList = res.data.records
        }
      })
    },
    newsDetailTo(id) {
      this.$router.push({ path: "/newsHome/news-detail", query: { id: id } });
    }
  },
  mounted() {
    window.addEventListener("resize", this.resize);
    this.initNews()
  },
  destroyed() {
    window.removeEventListener('resize', this.resize)
  }
};
</script>
<style lang="less" scoped>
@import "~@/style/variables.less";

.wrap {
  min-width: 1200px;
}

.banner {
  width: 100%;
}

.news {
  @vertical_center();
  padding: 0 50px;
  .photo {
    width: 770px;
    height: 518px;
  }
  .news-list {
    flex: 1;
    height: 518px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .list-item {
      @box_shadow();
      width: 100%;
      height: 160px;
      padding: 20px;
      .list-title {
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
      }
      .list-tcontent {
        .text_overflow_ellipsis_more(2);
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}

.solution {
  padding: 50px 50px 30px 50px;
  .solution-title {
    text-align: center;
    color: #333;
    font-size: 40px;
    font-weight: bold;
  }
  .solution-title-sec {
    text-align: center;
  }
  .solution-box {
    width: 1280px;
    margin: 0 auto;
    .solution-row {
      display: flex;
      .solution-item {
        flex: 1;
        margin-right: 20px;
        margin-bottom: 20px;
        transition: all 0.65s;
        cursor: pointer;
        background-image: linear-gradient(
          180deg,
          transparent 0,
          rgba(0, 0, 0, 0.5)
        );
        background-size: cover;
        background-position: 0;
        overflow: hidden;
        position: relative;
        &:last-child {
          margin-right: 0;
          height: 316px;
        }
        .solution-item__mask {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-image: linear-gradient(
            180deg,
            transparent 0,
            rgba(0, 0, 0, 0.5)
          );
          transition: 0.65s;
          opacity: 0;
        }
        .solution-item__text {
          position: absolute;
          top: 0;
          left: 32px;
          right: 32px;
          height: 164px;
          transition: 0.65s;
          margin-top: 196px;
          .solution-item__text--icon {
            display: block;
            width: 48px;
            height: 48px;
            background-size: contain;
            margin-bottom: 16px;
            font-size: 48px;
            color: inherit;
            background-repeat: no-repeat;
          }
          .solution-item__text--title {
            position: relative;
            font-size: 16px;
            line-height: 20px;
            color: #fff;
            margin-bottom: 34px;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 100%;
              width: 34px;
              border-top: 2px solid;
              margin-top: 16px;
              opacity: 0;
              transition: 0.2s;
              background-color: #fff;
            }
          }
          .solution-item__text--desc {
            width: 420px;
            font-size: 14px;
            line-height: 22px;
            opacity: 0;
            transition: 0.2s;
            color: #fff;
          }
        }
        &:hover {
          flex: 2;
          .solution-item__mask {
            opacity: 1;
          }
          .solution-item__text {
            margin-top: 80px;
            .solution-item__text--title {
              &::after {
                opacity: 1;
              }
            }
            .solution-item__text--desc {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

.partner {
  width: 100%;
  height: 700px;
  background: url("~@/assets/bg4.jpeg") no-repeat center;
  padding: 80px;
  .partner-title {
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
  }
  .box-wrap {
    width: 1300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
  }
  .box {
    width: 288px;
    height: 120px;
    background-color: #999;
    position: relative;
    margin-bottom: 30px;
    cursor: pointer;
    .box-footer {
      @align_center();
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  .partner-img {
    transition: all 0.4s;
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
